<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>使用 Vue + LayUI 做后台管理</title>
<link type="text/css" rel="stylesheet" th:href="@{/lib/layui.css}">
<script th:src="@{/lib/vue-2.4.0.js}" type="text/javascript"></script>
<!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  -->
<script th:src="@{/lib/vue-resource-1.3.4.js}"></script>
</head>
<body>
	<div id="app" class="layui-container">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input v-model="title" type="text" placeholder="title" class="layui-input" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">链接</label>
				<div class="layui-input-block">
					<input v-model="link" type="text" placeholder="https://www.baidu.com/" class="layui-input" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">作者</label>
				<div class="layui-input-block">
					<input v-model="author" type="text" placeholder="author" class="layui-input" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否展示</label>
				<div class="layui-input-block">
					<input v-model="tag" type="text" placeholder="0/1" class="layui-input" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" @click="create()">添加</button>
				</div>
			</div>
		</form>
		<a href="/demo" class="layui-btn layui-btn-primary">返回</a>
	</div>
	
	<script>
	// 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
	Vue.http.options.root = 'http://localhost:8216/';

	// 全局启用 emulateJSON 选项:如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
	Vue.http.options.emulateJSON = true;

	var vm = new Vue({
		el: '#app',
		data: {
			title: '',
			link: '',
			author: '',
			tag: ''
		},
		methods: {
			create() { // 注意方法名不能为 update
				this.$http.post('insertBlog',{
					'title': this.title,
					'link': this.link,
					'author': this.author,
					'tag': this.tag
				})
				.then(result => {
					var result = result.body
					if (result.code === 200) {
						alert('添加成功！')
					} else {
						alert('添加失败！')
					}
				})
				.catch((response) => {
					alert('添加失败！')
				})
			}
		}
	})
</script>
</body>
</html>